import React, { useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
import "@/tailwind-variables.less";
import { Button } from "antd";
import { addUser, getTaskStatus } from "@/services";

import { useHook } from "./useHook";
import { generateRandomChineseName } from "@/utils/utils";
import { codeMirror1, codeMirror2, codeMirror3 } from "./codeMirror";

export const PollAfterCommit: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const { commitRun } = useHook({
    commitFn: addUser,
    pollingFn: getTaskStatus,
    setLoading,
    successCallback: (data) => {
      console.log("data:", data);
      setLoading(false);
    },
  });

  // 处理缓存按钮
  const handleClick = () => {
    setLoading(true);
    commitRun({ name: generateRandomChineseName(), age: 18 });
  };

  return (
    <div className="w-[80vw]">
      <Button type="primary" loading={loading} onClick={handleClick}>
        点击调用
      </Button>
      <div>
        <div className="my-1">useHook.ts</div>
        <CodeMirror
          value={codeMirror1}
          height="300px"
          extensions={[javascript(), vscodeDark]}
        />
        <div className="my-1">PollAfterCommit.tsx</div>
        <CodeMirror
          value={codeMirror2}
          height="300px"
          extensions={[javascript(), vscodeDark]}
        />
        <div className="my-1">service.ts</div>
        <CodeMirror
          value={codeMirror3}
          height="300px"
          extensions={[javascript(), vscodeDark]}
        />
      </div>
    </div>
  );
};
